<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡</title>
</head>
<body>
<div class="a">过渡</div>
<style>
    .a{
        width: 10%;
        transition: width 5s,height 5s,transform 5s,background-color 5s;
        background-color: red;
    }
    .a:hover{
        width: 100%;
        height: 100vh;
        transform: rotate(3600deg);
        background-color: yellow;
    }
    div{
        padding: 100px;
        text-align: center;
    }
</style>
</body>
</html>